<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Course} from "../../types";
import {getCourseListByDepartmentId} from "../../apis/CourseAssignmentApi.ts";
import {useStore} from "../../store";
import {
  addCourseSelection,
  deleteCourseSelection,
  getCourseSelectionCount,
  getIsSelectionCourse
} from "../../apis/CourseSelectionApi.ts";
import {ElMessage} from "element-plus";

const courseList = ref<Course[]>([])
const store = useStore()
const imageList = ref([
    '计算机一班20230088132张三',
    '/src/assets/banner1.jpg','/src/assets/banner2.jpg'
])
const getData = async () => {
  const res = await getCourseListByDepartmentId(store.studentInfo.departmentId)
  if (res.flag){
    courseList.value = res.data
    //计算当前这门课选修人数
    for (let i = 0; i < res.data.length; i++) {
      let r = await getCourseSelectionCount(res.data[i].id,store.studentInfo.departmentId)
      courseList.value[i].currentNum = r.data
      //查询当前课是否选修
      let existRes = await getIsSelectionCourse(res.data[i].id,store.studentInfo.departmentId,store.studentInfo.id)
      courseList.value[i].isSelected = existRes.data
    }
  }else{
    ElMessage.error(res.msg)
  }
  console.log('courseList',courseList.value)
}
//选修或取消选修
const selectionCourse = async (type:string,item:Course) => {
  if (type === 'add'){
    let res = await addCourseSelection({
      studentId: store.studentInfo.id,
      courseId: item.id,
      departmentId: store.studentInfo.departmentId
    })
    if (res.flag){
      ElMessage.success(res.msg)
      await getData()
    }else{
      ElMessage.error(res.msg)
    }
  }
  if (type === 'delete'){
    let res = deleteCourseSelection({
      studentId: store.studentInfo.id,
      courseId: item.id,
      departmentId: store.studentInfo.departmentId
    })
    if (res.flag){
      ElMessage.success(res.msg)
    }
    await getData()

  }
}
onMounted(async () => {
  await getData()
})
</script>

<template>
  <div class="block text-center banner">
    <el-carousel height="300px" motion-blur>
      <el-carousel-item v-for="item in imageList" :key="item">
        <el-image style="width: 100%; height: 100%" :src="item" fit="cover" >
          <template #error>
            <div class="image-slot text-center">
              <p style="text-align: center;margin-top: 140px;font-size: 16px;">{{item}}</p>
            </div>
          </template>
        </el-image>
      </el-carousel-item>
    </el-carousel>
    <el-divider />
    <el-table stripe show-overflow-tooltip :data="courseList" style="width: 100%">
      <el-table-column prop="id" label="课程编号" width="100" />
      <el-table-column prop="name" label="课程名称" width="100" />
      <el-table-column prop="teacher" label="教师" width="100" />
      <el-table-column label="课程时间" width="80" >
        <template #default="scope">
          周{{scope.row.xq}}
        </template>
      </el-table-column>
      <el-table-column label="起止节数" width="80" >
        <template #default="scope">
          {{scope.row.start}}-{{ scope.row.end}}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="课程介绍" />
      <el-table-column prop="creditHours" label="学时" width="80"/>
      <el-table-column label="选修人数" width="80">
        <template #default="scope">
          <p>{{scope.row.currentNum}} / {{scope.row.maxNum}}</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140" >
        <template #default="scope">
          <el-button v-if="scope.row.isSelected" type="warning" @click="selectionCourse('delete',scope.row)" size="small">取消选修</el-button>
          <el-button v-else type="success" size="small" :disabled="scope.row.currentNum >= scope.row.maxNum"
                     @click="selectionCourse('add',scope.row)">选修</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<style scoped>
.banner{
  width: 65%;
  margin: 30px auto;
  border-radius: 10px;
  overflow: hidden;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>